<template> 
    <div>
        <RadioGroup v-model="condition.type" @on-change="conditionfun">
            <Radio v-for="(item,index) in typelist" :key="index" :label="item.value">{{item.label}}</Radio>
        </RadioGroup>
        <br/> 
        <div v-show="condition.type=='3'">
            <div style="margin:5px">
                <Select style="width:90%;" v-model="condition.searchvalue" placeholder="请选择民族">
                    <Option v-for="(item,index) in dictionaryList.nationList" :value="item.value_code" :key="index">{{ item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn }}</Option>
                </Select>
            </div>
        </div>

        <div  v-show="condition.type=='5'">
            <div style="margin:5px">
                <Select style="width:90%;" v-model="condition.searchvalue" placeholder="请选择职称">
                    <Option v-for="(item,index) in dictionaryList.jobtitleList" :value="item.value_code" :key="index">{{ item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn }}</Option>
                </Select>
            </div>
        </div>
        <div  v-show="condition.type=='4'">
            <div style="margin:5px">
                <Select style="width:90%;" v-model="condition.searchvalue" placeholder="请选择性别">
                    <!-- <Option v-for="(item, index) in dictionaryList.sexList" :key="index" :value="item.id">{{ item.dictionary_name.zh }}</Option> -->
                    <Option value="男">男</Option>
                    <Option value="女">女</Option>
                </Select>
            </div>
        </div>
        <div  v-show="condition.type=='6'">
            <div style="margin:5px">
                <Select style="width:90%;" v-model="condition.searchvalue" placeholder="请选择首字母" filterable>
                    <Option value="A">A</Option>
                    <Option value="B">B</Option>
                    <Option value="C">C</Option>
                    <Option value="D">D</Option>
                    <Option value="E">E</Option>
                    <Option value="F">F</Option>
                    <Option value="G">G</Option>
                    <Option value="H">H</Option>
                    <Option value="I">I</Option>
                    <Option value="J">J</Option>
                    <Option value="K">K</Option>
                    <Option value="L">L</Option>
                    <Option value="M">M</Option>
                    <Option value="N">N</Option>
                    <Option value="O">O</Option>
                    <Option value="P">P</Option>
                    <Option value="Q">Q</Option>
                    <Option value="R">R</Option>
                    <Option value="S">S</Option>
                    <Option value="T">T</Option>
                    <Option value="U">U</Option>
                    <Option value="V">V</Option>
                    <Option value="W">W</Option>
                    <Option value="X">X</Option>
                    <Option value="Y">Y</Option>
                    <Option value="Z">Z</Option>
                </Select>
            </div>
        </div>
        <div  v-show="['1','2'].includes(condition.type)">
            <div style="margin:5px">
                <Input v-model="condition.searchvalue" placeholder="请输入搜索内容" style="width: 200px;" @on-enter="queryData"/>
            </div>
        </div>
        <br/>    
        <Button type="primary" @click="queryData" long>检索</Button>
    </div>
</template>

<script>   
    export default {
        data () {
            return {
                condition:{
                    type:'1',
                    searchvalue:'',
                },
                typelist: [
                    {
                        value: '1' ,
                        label: '姓名',    
                    },
                    {
                        value: '6' ,
                        label: '首字母',    
                    },
                    {
                        value: '2' ,
                        label: '身份证号',    
                    },
                    {
                        value: '3' ,
                        label: '民族',    
                    },
                    {
                        value: '4' ,
                        label: '性别',    
                    },
                    {
                        value: '5' ,
                        label: '职称',    
                    },
                ],
                dictionaryList: {
                    sexList: [],
                    jobtitleList: [],
                    nationList: []
                },
            }
        },
        methods: {
            /************************************************************
             * 
             * 加载数据字典数据
             * 
             ************************************************************/
            // dictionaryData() {
            //     this.$http.get('api/dictionary/v1/dictionary/pidquerys?jobtitle&nation').then((response) => {
            //         this.dictionaryList = response.data
            //     }).catch(err=>{
            //         if(err.code && err.code==422) {
            //             this.$Message.error(err.message);
            //         }
            //     })
            // },


            /************************************************************
             * 
             * 点击确认
             * 
             ************************************************************/
            queryData(){
                this.$emit('on-condition',this.condition);
                this.$emit('modal1',false);
                
            },

            conditionfun(val){
                this.condition.type=val
                this.condition.searchvalue=''
            },

            // 民族
            nationData () {
                let url = 'api/base/dictionary/get/bycode/nation'
                let that = this
                this.$http.get(url).then((res) => {
                    that.dictionaryList.nationList = res.data
                }).catch(err=>{
                    
                })
            },

            // 性别
            genderData () {
                let url = 'api/base/dictionary/get/bycode/gender'
                let that = this
                this.$http.get(url).then((res) => {
                    that.dictionaryList.sexList = res.data
                }).catch(err=>{
                    
                })
            },

            // 职称
            jobtitleData () {
                let url = 'api/base/dictionary/get/bycode/jobtitle'
                let that = this
                this.$http.get(url).then((res) => {
                    that.dictionaryList.jobtitleList = res.data
                }).catch(err=>{
                    
                })
            },
        },
        mounted(){
            // this.dictionaryData()
            this.nationData()
            this.genderData()
            this.jobtitleData()
        },

    }
</script>